<template>
  <div class="gep-results-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>GEP结果管理</h2>
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>
        新增结果
      </el-button>
    </div>

    <!-- 搜索组件 -->
    <SearchForm
      @search="handleSearch"
      @reset="handleReset"
    />

    <!-- 数据表格组件 -->
    <DataTable
      :loading="loading"
      :table-data="tableData"
      :pagination="pagination"
      @selection-change="handleSelectionChange"
      @edit="handleEdit"
      @delete="handleDelete"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 表单对话框组件 -->
    <FormDialog
      v-model:visible="dialogVisible"
      :is-edit="isEdit"
      :form-data="formData"
      :submit-loading="submitLoading"
      @submit="handleSubmit"
      @close="handleDialogClose"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import SearchForm from './components/SearchForm.vue'
import DataTable from './components/DataTable.vue'
import FormDialog from './components/FormDialog.vue'
import {
  getGepResults,
  createGepResult,
  updateGepResult,
  deleteGepResult
} from '@/api/gep_results'

// 响应式数据
const loading = ref(false)
const submitLoading = ref(false)
const dialogVisible = ref(false)
const isEdit = ref(false)
const selectedRows = ref([])

// 表格数据
const tableData = ref([])

// 分页数据
const pagination = reactive({
  page: 1,
  per_page: 10,
  total: 0
})

// 表单数据
const formData = reactive({
  id: null,
  year: '',
  gepCity: '',
  gepDistrict: '',
  gepTown: '',
  gepResult: '',
  materialSupplyValue: '',
  cleanEnergyValue: '',
  waterResourcesValue: '',
  tourismHealthValue: '',
  leisureRecreationValue: '',
  landscapeAppreciationValue: ''
})

// 方法
const loadData = async (searchParams = {}) => {
  try {
    loading.value = true
    const params = {
      page: pagination.page,
      per_page: pagination.per_page,
      ...searchParams
    }
    
    const response = await getGepResults(params)
    tableData.value = response.data.gep_results
    pagination.total = response.data.pagination.total
  } catch (error) {
    console.error('加载数据失败:', error)
    ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = (searchForm) => {
  pagination.page = 1
  loadData(searchForm)
}

const handleReset = () => {
  pagination.page = 1
  loadData()
}

const handleSizeChange = (size) => {
  pagination.per_page = size
  pagination.page = 1
  loadData()
}

const handleCurrentChange = (page) => {
  pagination.page = page
  loadData()
}

const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

const resetFormData = () => {
  Object.keys(formData).forEach(key => {
    if (key === 'id') {
      formData[key] = null
    } else {
      formData[key] = ''
    }
  })
}

const handleAdd = () => {
  isEdit.value = false
  resetFormData()
  dialogVisible.value = true
}

const handleEdit = (row) => {
  isEdit.value = true
  Object.keys(formData).forEach(key => {
    if (row[key] !== undefined) {
      formData[key] = row[key]
    }
  })
  dialogVisible.value = true
}

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条记录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await deleteGepResult(row.id)
    ElMessage.success('删除成功')
    loadData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

const handleSubmit = async (form) => {
  try {
    submitLoading.value = true
    
    if (isEdit.value) {
      await updateGepResult(form.id, form)
      ElMessage.success('更新成功')
    } else {
      await createGepResult(form)
      ElMessage.success('创建成功')
    }
    
    dialogVisible.value = false
    loadData()
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败')
  } finally {
    submitLoading.value = false
  }
}

const handleDialogClose = () => {
  resetFormData()
}

// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.gep-results-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}
</style> 